var form = document.forms.namedItem("upload-file");
    var projects_id = document.getElementById('project_id').innerHTML;

    form.addEventListener('submit' ,function (ev) {
        var title = JSON.stringify($("input[name='title[]']").serializeArray());
        var desccription = JSON.stringify($("input[name='description[]']").serializeArray());

        var oData = new FormData(document.forms.namedItem("upload-file"));
        oData.append('projects_id',projects_id);
        oData.append('title',title);
        oData.append('description',desccription);
        var oReq = new XMLHttpRequest();
        oReq.open("POST", '<?php echo base_url()."index.php/project/uploadFile"?>', true);
        oReq.onload = function (oEvent) {
            if (oReq.status == 200) {
//                location.reload();
                $("#list-download-file").load('<?php echo base_url()."index.php/project/listDownloadFile"?>',{'project_id': projects_id})
            } else {
                console.log("Error " + oReq.status + " occurred uploading your file.<br \/>");
            }
        };

        oReq.send(oData);
        ev.preventDefault();
    }, false);
    $("#file-3").fileinput({
        'showUpload':false,
        'showCaption':false,
        'previewFileType':'any',
        browseClass: "btn btn-primary btn-md",
        fileType: "any",
        'previewSettings' : {
            image: {width: "160px", height: "auto"},
            html: {width: "180px", height: "100px"},
            text: {width: "90px", height: "90px"},
            video: {width: "180px", height: "130px"},
            audio: {width: "180px", height: "50px"},
            flash: {width: "180px", height: "100px"},
            object: {width: "180px", height: "160px"},
            other: {width: "160px", height: "120px"}
        },
        'previewTemplates' : {

            image: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}">\n' +
                '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}">\n</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div></div>',

            other: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}">\n' +
                '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}">\n</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div></div>',

            text: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}">\n'+'<div class="file-preview-text" title="{caption}">\n' +
                ' {data}\n' +'</div>\n'+'</div>'+'<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>'+'</div>',

            video: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}">\n' +
                '   <video width="{width}" height="{height}" controls>\n' +
                '       <source src="{data}" type="{type}">\n' +
                '\n' +
                '   </video>\n'+'</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>\n',
            audio: '<div class="col-lg-12"> <div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}">\n' +
                '   <audio controls>\n' +
                '       <source src="{data}" type="{type}">\n' +
                '     \n' +
                '   </audio>\n</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>',
            flash: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}">\n' +
                '   <object type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
                '   </object>\n</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>',
            object: '<div class="col-lg-12"><div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}">\n' +
                '    <object data="{data}" type="{type}" width="{width}" height="{height}">\n' +
                '      <param name="movie" value="{caption}" />\n' +
                '   </object>\n</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>',
            other: '<div class="col-lg12"><div class="col-lg-2 file-preview-frame" id="{previewId}" title="{caption}" >\n' +
                '   \n</div>' +
                '<div class="col-lg-5"> <input placeholder="Nhập tên file" name="title[]" type="text" style="margin-bottom:20px;" />' +
                '<input type="text" placeholder="Mô tả file" name="description[]" style="margin-bottom:20px;" /></div>' +
                '</div>'




        }

    });